<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.login-container {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.login-form {
				width: 400px;
				padding: 40px;
				background: white;
				border-radius: 10px;
				box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
			}

			.title {
				text-align: center;
				margin-bottom: 30px;
				color: #333;
				font-size: 24px;
				font-weight: bold;
			}

			.submit-btn {
				width: 100%;
			}

			.links {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="login-container">
				<div class="login-form">
					<h2 class="title">欢迎登录</h2>
					<el-form :model="loginForm" ref="loginForm">
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" placeholder="请输入用户名"
								prefix-icon="el-icon-user"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
								show-password></el-input>
						</el-form-item>
						<el-form-item prop="remember">
							<el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" class="submit-btn" @click="login">登录</el-button>
						</el-form-item>
					</el-form>
					<div class="links">
						<a href="#">忘记密码</a>
						<a href="#">注册账号</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					remember: false
				}
			}
		},
		methods: {
			login() {
				let data = new URLSearchParams()
				data.append('username', this.loginForm.username)
				data.append('password', this.loginForm.password)
				axios({
					method: 'post',
					url: 'http://localhost:8080/auth/login',
					data: data
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						this.loginForm.password = ''
						return
					}
					// 1.保存token令牌
					localStorage.setItem('token', resp.data.data)
					// 2.跳转到首页
					location.href = 'index.html'
				})
			}
		}
	})
</script>